<template>
    <!-- 弹出层 -->
    <a-modal title="新增权限" @cancel="btnCancel" @ok="btnOk" v-model:visible="showDialogComputed">
        <!-- labelCol定义 表单中左侧标题的一个宽度 -->
        <a-form :labelCol="{ span: 4 }">
            <a-form-item label="权限点" name="name" v-bind="form.validateInfos.name">
                <a-input v-model:value="formData.name" placeholder="请输入权限点"></a-input>
            </a-form-item>
            <a-form-item label="类型">
                <a-space>
                    <a-select v-model:value="value" label-in-value style="width: 120px" :options="options"
                        @change="handleChange"></a-select>
                </a-space>
            </a-form-item>

        </a-form>
    </a-modal>
</template>

<script setup lang="ts">
import { Form, message } from 'ant-design-vue'

const { showPermissionDialog } = defineProps({
    showPermissionDialog: Boolean
})

// 得到一个事件触发器
const emits = defineEmits<{
    (e: 'update:showDialogComputed', val: Boolean): void,
    (e: 'close'): void,
}>()

const initValues: { name: string, type: 'button' | 'route' } = {
    name: '',
    type: 'route'
}
const formData = ref(initValues) // 声明一个响应式数据

const showDialogComputed = computed({
    get() {
        return showPermissionDialog  // 读取Props传来的值
    },
    set(val) {
        // val 是需要从父组件去入手修改 子传父
        emits('update:showDialogComputed', val) // 告诉父组件 去修改showDialog的值
    }
})

const options = ref([{ label: '路由层级', value: 'route' }, { label: '按钮层级', value: 'button' }])
const optionsItem = ref(options.value[0].value)
const value = ref({ value: optionsItem })
const handleChange = (option: { label: string, value: 'button' | 'route' }) => {
    initValues.type = option.value
};


const btnCancel = () => {
    form.resetFields() // 清除数据 并且清除校验
    emits('close')
}

const btnOk = async () => {
    await form.validate()
    // 到此不证明校验通过
    // const res = await addPermission({ name: formData.value.name, type: formData.value.type })
    const res = await addPermission(formData.value)
    // 校验通知
    res.code === 201 ? message.success('新增权限点成功') : message.error('新增权限点失败'),

        btnCancel(),
        // 关闭弹层
        showDialogComputed.value = false

    // 新增成功 只是后端接口插入了一条数据- 前端并没有更新- 重新拉取数据
    // 告诉父组件
    emits('close')
}

// 校验规则
const rules = reactive({
    name: [
        { required: true, message: '权限点不能为空', trigger: 'blur' },
        { min: 4, max: 20, message: '不能少于4-10个字母，路由层级小写，按钮层级大写' }
    ],
})

// 引入antd的From下的useForm方法把校验规则绑定在formData.value上
const form = Form.useForm(formData.value, rules)


</script>